<template>
    <view>
		<uni-popup ref="popup">
			<view class="content">
				<yz-qr :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
				<view class="text">
					<view>{{shop_name}}</view>
					<view>{{couponAmountText}}</view>
				</view>
			</view>
		</uni-popup> 
        <coupon-card-list :showClose="showClose" :useInPage="useInPage" :couponList="couponList"
            :defaultSelectType="defaultSelectType" @handleConvert="handleConvert" @handleSelectType="handleSelectType"
            @handClickCoupon="handClickCoupon" @handleClose="handleClose" v-if="isDataLoaded"></coupon-card-list>
    </view>
</template>

<script>
    import CouponCardList from '@/components/coupon-card-list/coupon-card-list.vue';
    import YzQr from '@/components/yz-qr/yz-qr.vue'
    export default {
        data() {
            return {
                showClose: false,
                useInPage: true,
                defaultSelectType: 'available',
                couponList: [],
				qrPath: '',
				text: 'hello',
				size: 260,
				quality:'L',
				colorDark: '#000000',
				colorLight: '#ffffff',
				shop_name:'',
				couponTime:'',
				isDataLoaded:false,
				couponAmountText:''
            }
        },
        
        components: {
            CouponCardList,
			YzQr
        },
		onShow() {
			this.getMyCoupons()
		},
        methods: {
			getMyCoupons(){
				this.$http.post('couponLogMy', {
				}).then(res => {
					// console.log(res)
					this.couponList = res.data.data
					this.isDataLoaded = true; // 假设数据加载完成 
				}).catch(err => {
				
				})
			},
            handClickCoupon(item) {
				if (item.type == 'available') {
					
					this.$refs.popup.open('center')
					this.shop_name = item.couponDesc
					this.couponAmountText = item.couponAmountText
					this.text = item.id
				}
                console.log('选中优惠券名称：' + item.couponName);
                console.log('选中优惠券优惠金额：' + item.discountPrice);
				
            },
            /**
             * 点击兑换
             */
            handleConvert(type) {
                console.log('-点击兑换-');
                console.log('兑换码：' + type);
            },
            /**
             * 切换优惠券类别
             */
            handleSelectType(type) {
                console.log('切换优惠券类别：' + type);
            },
            /**
             * 关闭优惠券：浮层时候使用
             */
            handleClose() {
                console.log('点击不使用优惠券');
            }
        }
    }
</script>
 <style>
	 .coupon-time{
		 margin-left: 30rpx;
	 }
	 .content{
		 background-color: #f3f3f3;
		 border-radius: 20rpx;
	 }
	.text {
		background-color: #f3f3f3;
		padding: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius: 15rpx;
		font-size: 24rpx;
	}

	.text text {
		font-weight: 700;
		margin-left: 16rpx;
	}
    </style>